﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="GioHang.aspx.cs" Inherits="GioHang" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <style>
        #page_conteiner
        {
            width: 980px;
            height: 800px;
            background-color: White;
            top: 368px;
            position: absolute;
            display: none;
        }
        .show_cart
        {
            width: 980px;
            min-height: 500px;
            top: 368px;
            background-color: White;
            position: absolute;
            display: block;
        }
        .checkout div.checkout1
        {
            background-color: rgb(212,209,201);
            width: 285px;
            height: 30px;
        }
        .checkout div.checkout2
        {
            height: 30px;
            position: absolute;
            top: 43px;
            right: 0px;
            border-bottom: 15px solid rgb(212,209,201);
            border-right: 20px solid transparent;
            border-left: 0px;
            bottom: 50%;
        }
        .checkout div.checkout3
        {
            height: 30px;
            position: absolute;
            top: 88px;
            right: 0px;
            border-top: 15px solid rgb(212,209,201);
            border-right: 20px solid transparent;
            border-left: 0px;
            bottom: 50%;
        }
        .checkout:hover div.checkout1
        {
            background-color: rgb(148,141,120);
            -webkit-transition: border-color 0.4s ease 0s, background-color 0.4s ease 0s;
        }
        .checkout:hover div.checkout2
        {
            border-bottom: 15px solid rgb(148,141,120);
            -webkit-transition: border-color 0.4s ease 0s, background-color 0.4s ease 0s;
        }
        .checkout:hover div.checkout3
        {
            border-top: 15px solid rgb(148,141,120);
            -webkit-transition: border-color 0.4s ease 0s, background-color 0.4s ease 0s;
        }
    </style>
    <script>
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div id="page_conteiner">
        dfaffffffffffffffffffffffffdfaffffffffffffffffffffffffdfaffffffffffffffffffffffffdfaffffffffffffffffffffffff
        dfaffffffffffffffffffffffff<br />
        dfaffffffffffffffffffffffff<br />
        dfaffffffffffffffffffffffff<br />
        dfaffffffffffffffffffffffff<br />
        dfaffffffffffffffffffffffff<br />
        dfaffffffffffffffffffffffff<br />
        dfaffffffffffffffffffffffff<br />
        dfaffffffffffffffffffffffff<br />
        dfaffffffffffffffffffffffff<br />
        dfaffffffffffffffffffffffff<br />
        dfaffffffffffffffffffffffff<br />
        <div class="last">
        </div>
    </div>
    <div class="show_cart">
        <div class="" style="left: 255px; top: 78px; width: 486px; min-height: 211px; position: absolute;
            border: 2px solid rgb(246,240,223); box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.5);">
            <div class="rs_Cart">
                <p style="color: White; padding-top: 70px; font-weight: bold">
                    Loading...</p>
            </div>
            <div style="width: 100%; margin-top: 50px; display: none">
                <div style="width: 100%; text-align: center">
                    <span style="font: 14px/1.4em Caudexx, serif;">Your shopping cart is empty</span>
                </div>
                <div style="width: 100%;">
                    <div style="background-color: rgb(148,141,120); width: 80px; text-align: center;
                        position: absolute; left: 200px; top: 80px">
                        <img src="image/empty_cart.png" />
                    </div>
                </div>
            </div>
            <div style="width: 426px; margin: 30px 0px 0px 30px;">
                <table style="width: 420px">
                    <tr>
                        <td style="width: 77px">
                            <div style="margin: 5px; width: 55px; height: 55px; background-color: rgb(148,141,120);">
                                <img src="image/products/2.jpg" width="51px" height="51px" style="margin-top: 2px;
                                    margin-left: 2px" />
                            </div>
                        </td>
                        <td>
                            <div style="display: -webkit-box; -webkit-box-orient: vertical;">
                                <div style="width: 165px; height: 19px; vertical-align: middle;">
                                    <span style="font: 14px Caudex, serif">I am a product</span>
                                </div>
                            </div>
                        </td>
                        <td style="width: 60px;">
                            <input type="number" style="text-align: center; width: 40px; height: 22px" step="1"
                                min="1" max="9999" value="1" />
                        </td>
                        <td style="width: 70px;">
                            <div style="height: 19px">
                                <span style="font: 14px/1.4em Caudex, serif">$9.99</span>
                            </div>
                        </td>
                        <td style="width: 30px">
                            <div class="del_Cart" style="width: 20px; height: 20px; border: 1px solid; text-align: center">
                                <input type="text" value="2" style="display: none" />
                                x</div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 77px">
                            <div style="margin: 5px; width: 55px; height: 55px; background-color: rgb(148,141,120);">
                                <img src="image/products/2.jpg" width="51px" height="51px" style="margin-top: 2px;
                                    margin-left: 2px" />
                            </div>
                        </td>
                        <td>
                            <div style="display: -webkit-box; -webkit-box-orient: vertical;">
                                <div style="width: 165px; height: 19px; vertical-align: middle;">
                                    <span style="font: 14px Caudex, serif">I am a product</span><br />
                                </div>
                                <div style="width: 165px; height: 19px; vertical-align: middle;">
                                    <span style="font: 14px Caudex, serif">Size: 40X40</span><br />
                                </div>
                                <div style="width: 165px; height: 19px; vertical-align: middle;">
                                    <span style="font: 14px Caudex, serif">Frame: Black</span>
                                </div>
                            </div>
                        </td>
                        <td style="width: 60px;">
                            <input type="number" style="text-align: center; width: 40px; height: 22px" step="1"
                                min="1" max="9999" value="1" />
                        </td>
                        <td style="width: 70px;">
                            <div style="height: 19px">
                                <span style="font: 14px/1.4em Caudex, serif">$9.99</span>
                            </div>
                        </td>
                        <td style="width: 30px">
                            <div class="del_Cart" style="width: 20px; height: 20px; border: 1px solid; text-align: center">
                                <input type="text" value="1" style="display: none" />
                                x</div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div style="width: 305px; position: absolute; top: 300px; left: 440px;">
            <div style="border: 2px solid rgb(197,189,160); padding: 20px">
                <div style="display: -webkit-box; -webkit-box-orient: horizontal">
                    <div style="width: 210px">
                        <span style="font: 14px Caudex, serif;">TOTAL</span>
                    </div>
                    <div>
                        <span style="font: 15px Caudexx, serif">$9.99</span>
                    </div>
                </div>
            </div>
            <div class="checkout" style="margin-top: 10px">
                <div class="checkout1">
                </div>
                <div class="checkout2">
                </div>
                <div class="checkout3">
                </div>
                <a style="text-align: center; position: absolute; top: 80px; bottom: 0px; left: 0px;
                    right: 0px; cursor: pointer !important"><span style="font: 14px Caudexx, serif; color: white;
                        white-space: nowrap; display: inline-block">CHECKOUT</span> </a>
            </div>
        </div>
    </div>
</asp:Content>
